import '../../scss/use/window.scss'
import { Button, Form, Input } from 'antd';
import 'antd/dist/antd.min.css'
import axios from 'axios';
import { useContext } from 'react';
import ThemeContext from '../public/ThemContext';
export default function Bind() {
    const onFinish = (values: any) => {
        // console.log('Received values of form: ', values);
        //注册
        axios.post('http://127.0.0.1:81/regLogin', {
            params: { values }
        }).then((res: any) => {
            console.log(res);
            if (res.data.code === 0) {
                alert(res.data.msg)
            } else if (res.data.code === -1) {
                alert(res.data.msg)
            } else {
                alert(res.data.msg)
            }
        }).catch(function (error: any) {
            console.log(error);
        });
    };

    let { operate } = useContext(ThemeContext);

    return (
        <div style={{ display: (operate === '绑定' ? 'block' : 'none') }}>
            <Form
                name="modify"
                onFinish={onFinish}
                scrollToFirstError
            >
                <Form.Item
                    name="httpss"
                    hasFeedback
                >
                    <Input.Password size='large' placeholder="7mx.com/" />
                </Form.Item>
                <Form.Item
                    name="phone"
                    rules={[{ required: true, max: 11 },
                    ({ getFieldValue }) => ({
                        validator(_, e: any) {
                            const value = getFieldValue('phone');
                            if (value) {
                                if (value.length === 11 && !(/^(1[3456789]|9[28])\d{9}$/).test(value)) {
                                    return Promise.reject(new Error('请输入11位有效电话号码!'));
                                }
                                if (value.length !== 11) {
                                    return Promise.reject(new Error('请输入11位电话号码!'));
                                }
                                return Promise.resolve();
                            }
                            return Promise.resolve();
                        },
                    }),
                    ]}
                >
                    <Input style={{ width: '100%' }} size='large' placeholder="155****8356" name="tele" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" block size='large' style={{ width: '400px' }}>
                        确定
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
